<template>
  <div class="stepsBar displayFlex">
    <div class="stepItem" v-for="(stepsItem,stepsIndex) in stepsData" :key="stepsIndex">
      <p :class="{on:stepsIndex<stepStatus}" v-if="stepsItem.num!='ok'"><span>{{stepsItem.num}}</span></p>
      <p :class="{on:stepsIndex<stepStatus}" v-if="stepsItem.num=='ok'"><span><Icon type="checkmark-round"></Icon></span></p>
      <p>{{stepsItem.title}}</p>
    </div>
  </div>
</template>

<script>
  import './main.scss'
  export default {
    props:{
      stepStatus:'',
      stepsData:{},
    },
    data() {
      return {}
    },
    mounted() {},
    activated() {
    },
    deactivated() {
    },
    methods: {},
    components: {},
    watch: {}
  }
</script>
